<template>
    <overallview :element="props.element">
        <el-row 
            :ref="props.element.options.ref ? props.element.options.ref : undefined"
            :id="props.element.options.id ? props.element.options.id : undefined"
            :name="props.element.options.name ? props.element.options.name : undefined"
            :class="['little-bear-row',props.element.options.class, props.element.list.length == 0 ? 'little-bear-child-empty' : ''] "
            :gutter="props.element.options.gutter"
            :justify="props.element.options.justify"
            :align="props.element.options.align"
            :tag="props.element.options.tag"
        >
            <column v-for="element, index in props.element.list" :element="element"></column>
        </el-row>
    </overallview>
</template>

<script setup>
import overallview from '../overallview.vue'
import column from '../column/view.vue'
import { useDragStore } from "@/store/modules/drag"
import { deepCopy, deepMerge, uuid } from "@/utils/index"
import { loadComponent, components, loadComponentConfig } from "@/elements/index"
import clolumnConfig from "@/elements/column/config"

// 接收父节传入点参数
const props = defineProps({ 
    element: { // 元素信息
        type: Object,
        default: () => ({}),
    }
})

// 拖拽数据
const dragStore = useDragStore()

// 默认新增两列
if(props.element.list && props.element.list.length == 0){
    for (let i = 0; i <2; i++) {
        props.element.list.push(dragStore.listPust(clolumnConfig))

        // 重置拖拽层级
        dragStore.resetOutlineLevels()
    }
}

</script>